<template>
    <t-image-viewer :images="images">
        <template #trigger="{ open }">
            <div class="tdesign-demo-image-viewer__ui-image">
                <t-image fit="cover" shape="round" :style="{ width: `${width}px`, height: `${height}px` }" :src="images[0]"/>
                <div class="tdesign-demo-image-viewer__ui-image--hover" :style="{width: `${width}px`, height: `${height}px`}" @click="open">
                    <BrowseIcon  />
                </div>
            </div>
        </template>
    </t-image-viewer>
</template>

<script setup lang="ts">
import { BrowseIcon } from 'tdesign-icons-vue-next';
defineProps({
    images: {
        type: Array,
        default: []
    },
    width: {
        type: Number,
        default: 100
    },
    height: {
        type: Number,
        default: 100
    },
});
</script>
<style scoped>
.tdesign-demo-image-viewer__ui-image {
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--td-radius-small);
    overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--td-text-color-anti);
    line-height: 22px;
    transition: 0.2s;
    z-index: 99;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
    opacity: 1;
    cursor: pointer;
}



.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
    cursor: pointer;
}

.tdesign-demo-image-viewer__base {
    width: 160px;
    height: 160px;
    margin: 10px;
    border: 4px solid var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
}
</style>
